<template>
  <div class="login">
    <div class="header">
      <mu-appbar title="Title">
        <mu-flat-button label="登录" slot="default"/>
      </mu-appbar>
    </div>
    <div class="content">
      <mu-text-field label="帐号" labelFloat name="username" v-model="username"/>
      <br/>
      <mu-text-field label="密码" type="password" labelFloat name="password" v-model="password"/>
      <br/>
      <mu-raised-button label="登录" fullWidth @click="login()" v-bind:disabled="!(username && password)" primary/>
      <div @click="register()">
        注册帐号
      </div>
      <div>
        {{errmsg}}
      </div>
    </div>
  </div>
</template>

<script>
//  import {mapGetters} from 'vuex'
  import axios from 'axios'
  import qs from 'qs'
  import {save} from '../util/cache'

  export default{
    data() {
      return {
        username: '',
        password: '',
        errmsg: ''
      }
    },
    mounted() {
      this.username = window.localStorage.getItem('username') || '';
      this.password = window.localStorage.getItem('password') || '';
    },
    methods: {
      login() {
        axios.post('http://im.fanggongxin.net/user/login', qs.stringify({
          username: this.username,
          password: this.password
        }))
          .then((response) => {
            console.log(response.data);
            if (response.data.errcode !== 0) {
              this.errmsg = response.data.errmsg;
              return;
            }
            window.localStorage.setItem('username', this.username);
            window.localStorage.setItem('password', this.password);
            this.$store.dispatch('appSetLoginUser', response.data.data);
            let url = `ws://im.fanggongxin.net/chat?userId=${response.data.data.id}`;
            this.ws = new WebSocket(url);
            this.ws.onopen = (ev) => {
              console.log(ev);
              this.$store.dispatch('appSetWs', this.ws);
              // listening
              this.ws.onmessage = (event) => {
                console.log(event.data);
                save(event.data);
                this.$store.dispatch('appSetNewMessage', true);
//                this.messages.push(JSON.parse(event.data));
              }
            };
            // 获取用户列表
            axios.get('http://im.fanggongxin.net/user/list')
              .then((result) => {
                this.$store.dispatch('appSetUserList', result.data.data);
              });
            this.$router.push('/home');
          })
          .catch((error) => {
            console.log(error);
          });
      },
      register() {
        this.$router.push('/reg');
      }
    },
    computed: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .login
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #fff
    .mu-appbar
      text-align: center
      .mu-flat-button-label
        font-size: 20px
    .content
      padding-top 160px
      width: 80%
      margin: 20px auto
      .mu-text-field
        width: 100%
      .mu-raised-button
        min-width: 80px
        display: block
        width: 100%
        margin: 0 auto
        transition: all 0.375s
        &.loading
          width: 80px
          height: 80px
          border-radius: 50%
</style>
